<template>
  <div class="bfc">
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.back()" />
    <van-form @submit="onSubmit">
      <van-cell-group>
        <van-field readonly label="房源信息" />
      </van-cell-group>
      <div class="line"></div>
      <!-- 小区名称 -->
      <van-field
        readonly
        clickable
        name="xiaoqu"
        label="小区名称"
        @click="$router.push('/xiaoqu')"
        ><template #extra>
          {{ community ? community : '请选择小区'}}

          <span>></span>
        </template>
      </van-field>
      <!-- 租金 -->
      <van-field
        name="price"
        v-model="valueprice"
        label="租金"
        placeholder="请输入租金/月"
        border
      >
        <template #extra>￥/月</template>
      </van-field>
      <!-- 建筑面积 -->
      <van-field
        name="size"
        v-model="valuesize"
        label="建筑面积"
        placeholder="请输入建筑面积"
      >
        <template #extra>㎡</template>
      </van-field>
      <!-- 户型 -->
      <van-field
        name="roomType"
        v-model="valueType"
        readonly
        clickable
        label="户型"
        @click="showPicker1 = true"
      >
        <template #extra>
          {{ value3 ? value3 : "请选择 " }}
          <span style="font-size: 18px; color: #888">></span>
        </template>
      </van-field>
      <van-popup v-model="showPicker1" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns1"
          @confirm="onConfirm1"
          @cancel="showPicker1 = false"
        />
      </van-popup>

      <!-- 所在楼层 -->
      <van-field
        readonly
        clickable
        name="floor"
        label="所在楼层"
        @click="showPicker2 = true"
      >
        <template #extra>
          {{ value4 ? value4 : "请选择 " }}
          <span style="font-size: 18px; color: #888">></span>
        </template>
      </van-field>
      <van-popup v-model="showPicker2" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns2"
          @confirm="onConfirm2"
          @cancel="showPicker2 = false"
        />
      </van-popup>

      <!-- 朝向 -->
      <van-field
        name="Cloud"
        readonly
        clickable
        label="朝向"
        @click="showPicker3 = true"
      >
        <template #extra>
          {{ value5 ? value5 : "请选择 " }}
          <span style="font-size: 18px; color: #888">></span>
        </template>
      </van-field>
      <van-popup v-model="showPicker3" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns3"
          @confirm="onConfirm3"
          @cancel="showPicker3 = false"
        />
      </van-popup>
      <!-- 房屋标题 -->
      <van-cell-group>
        <van-field readonly label="房屋标题" />
      </van-cell-group>
      <div class="line"></div>
      <div class="fw_content">
        <van-field
          name="title"
          v-model="valuemessage"
          placeholder="请输入标题(例如：整租 小区名 2室 5000元)"
        />
      </div>
      <!-- 房屋图像 -->
      <van-cell-group style="padding-top: 10px">
        <van-field readonly label="房屋图像" border />
        <van-uploader
        name="houseImg"
          enctype="multipart/form-data"
          v-model="fileList"
          multiple
          :after-read="afterRead"
        />
      </van-cell-group>
      <!-- 房屋配置 -->
      <van-cell-group>
        <van-field readonly label="房屋配置" />
      </van-cell-group>
      <van-grid :column-num="5">
        <van-grid-item
          icon="free-postage"
          text="衣柜"
          @click="changeColor('衣柜')"
          :class="[iconList.indexOf('衣柜')!==-1 ? 'color' : '']"
        />
        <van-grid-item
          icon="balance-list-o"
          text="洗衣机"
          @click="changeColor('洗衣机')"
         :class="[iconList.indexOf('洗衣机')!==-1 ? 'color' : '']"
        />
        <van-grid-item
          icon="shrink"
          text="空调"
          @click="changeColor('空调')"
          :class="[iconList.indexOf('空调')!==-1 ? 'color' : '']"
        />
        <van-grid-item
          icon="bulb-o"
          text="天然气"
          @click="changeColor('天然气')"
          :class="[iconList.indexOf('天然气')!==-1 ? 'color' : '']"
        />
        <van-grid-item
          icon="guide-o"
          text="冰箱"
          @click="changeColor('冰箱')"
        :class="[iconList.indexOf('冰箱')!==-1 ? 'color' : '']"
        />
        <van-grid-item
          icon="fire-o"
          text="暖气"
          @click="changeColor('暖气')"
        :class="[iconList.indexOf('暖气')!==-1 ? 'color' : '']"
        />
        <van-grid-item
          icon="video-o"
          text="电视"
          @click="changeColor('电视')"
           :class="[iconList.indexOf('电视')!==-1 ? 'color' : '']"
        />
        <van-grid-item
          icon="wap-home-o"
          text="热水器 "
          @click="changeColor('热水器')"
         :class="[iconList.indexOf('热水器')!==-1 ? 'color' : '']"
        />
        <van-grid-item
          icon="desktop-o"
          text="宽带"
          @click="changeColor('宽带')"
            :class="[iconList.indexOf('宽带')!==-1 ? 'color' : '']"
        />
        <van-grid-item
          icon="pending-payment"
          text="沙发"
          @click="changeColor('沙发')"
          :class="[iconList.indexOf('沙发')!==-1 ? 'color' : '']"
        />
      </van-grid>
      <!-- 房屋信息 -->
      <van-cell-group style="margin-top: 20px">
        <van-field readonly label="房屋描述" />
        <div class="line"></div>
        <textarea
         name="description"
          v-model="homemessage"
          rows="5"
          placeholder="请输入房屋描述信息"
          class="textarea-info"
        ></textarea>
      </van-cell-group>
      <!-- 尾部 -->
      <div class="footer">
        <div class="footer_left">取消</div>
        <div class="footer_right"><van-button round block type="info" native-type="submit">提交</van-button></div>
      </div>
    </van-form>
  </div>
</template>

<script>

import { gorent, housecondition, imgFn } from '@/api/house'
export default {
  data () {
    return {
      value1: '',
      value2: '',
      value: '',
      value3: '',
      value4: '',
      value5: '',
      valueType: '', // 户型
      homemessage: '', // 房屋描述
      valuemessage: '', // 房屋标题
      valueprice: '', // 租金
      valuesize: '', // 面积
      showPicker1: false,
      showPicker2: false,
      showPicker3: false,
      community: '', // 小区名字
      columns1: [],
      columns2: '',
      columns3: '',
      fileList: [], // 图像
      iconList: [],
      data: {},
      dataimg: []

    }
  },
  methods: {
    async  onSubmit (values) {
      const index3 = this.columns1.indexOf(this.value3)
      const index4 = this.columns2.indexOf(this.value4)
      const index5 = this.columns3.indexOf(this.value5)
      console.log(values)
      console.log(index3)
      console.log(this.value3)
      const res = await gorent({
        title: values.title,
        description: this.homemessage,
        houseImg: this.dataimg.join('|'),
        oriented: this.data.oriented[index5].value,
        supporting: this.iconList.join('|'),
        price: values.price,
        roomType: this.data.roomType[index3].value,
        size: values.size,
        floor: this.data.floor[index4].value,
        community: this.$store.state.name.community
      })
      console.log(res)
    },
    onConfirm1 (value3) {
      this.value3 = value3
      this.showPicker1 = false
    },
    onConfirm2 (value4) {
      this.value4 = value4
      this.showPicker2 = false
    },
    onConfirm3 (value5) {
      this.value5 = value5
      this.showPicker3 = false
    },
    async  afterRead (file) {
      // 此时可以自行将文件上传至服务器
      const res = await imgFn(file)
      console.log(res)
      this.dataimg.push(...res.body)
    },
    changeColor (value) {
      // 新建一个空数组，数组里面有没有的话添加，添加类名，有的删除：
      if (this.iconList.indexOf(value) === -1) {
        this.iconList.push(value)
        console.log(this.iconList)
      } else {
        this.iconList.splice(this.iconList.indexOf(value), 1)
      }
    }
  },
  async  created () {
    const xiaoqu = this.$store.state.name.communityName
    this.community = xiaoqu
    const res = await housecondition('AREA|88cff55c-aaa4-e2e0')
    console.log(res)
    // 从数据里得到户型楼层朝向的三个数据
    this.columns1 = res.body.roomType.map(item => item.label)
    this.columns2 = res.body.floor.map(item => item.label)
    this.columns3 = res.body.oriented.map(item => item.label)
    // this.value3 = res.body.roomType.map(item => item.value)
    this.data = res.body
    console.log(this.columns1)
  }
}
</script>

<style lang="less" scoped>
.line {
  border: 0.5px solid rgb(229, 225, 225);
}
.fw {
  color: #21b97a;
}
.fw_content p {
  color: gray;
  font-size: 12px;
}
.van-uploader {
  margin-top: 10px;
  margin-bottom: 10px;
}
.bgc {
  background-color: #ab59ab;
}
.footer {
  margin-top: 30px;
  position: fixed;
  bottom: 0;
  width: 100%;
  color: #fff;
  background-color: red;
  display: flex;
  justify-content: space-evenly;
  text-align: center;
}
.footer_left {
  width: 200px;
  color: #21b97a;
  background-color: #fff;
  line-height: 45px;
  height: 45px;
}

.footer_right {
  width: 200px;
  height: 45px;
  line-height: 45px;
  background-color: #21b97a;
  height: 45px;
}
.color {
  color: #21b97a;
}

.textarea-info {
  width: 350px;
  border: none;
  outline: none;
  margin-top: 10px;
  padding-left: 16px;
  font-size: 14px;
  height: 150px;
}
.textarea-info::placeholder {
  color: #bbbbbb;
}
</style>
